import React from 'react'
import {Image,StyleSheet} from 'react-native'
import {createBottomTabNavigator,createStackNavigator} from 'react-navigation'
import Favorite from './page/Favorite'
import Trending from './page/Trending'
import My from './page/My'
import Popular from './page/Popular'

const PopularNavigator = createStackNavigator (
    {
        Popular: Popular
    },
    {
        navigationOptions:({
            headerStyle: {
                backgroundColor: '#6495e6'
            },
            headerTitleStyle:{
                color: 'white'
            }
        })
    }
)

const TrendingNavigator = createStackNavigator ({
    Trending: Trending
})

const FavoriteNavigator = createStackNavigator ({
    Favorite: Favorite
})

const MyNavigator = createStackNavigator ({
     My: My
})

export default  TabNavigation = createBottomTabNavigator (
    {
        Popular: PopularNavigator,
        Trending: TrendingNavigator,
        Favorite: FavoriteNavigator,
        My: MyNavigator
    },
    {
        navigationOptions: ({navigation}) => ({
            tabBarIcon: ({tinColor,focused}) => {
                const {routeName} = navigation.state
                let iconName
                switch (routeName) {
                    case 'Popular':
                            iconName = require('./res/images/ic_polular.png')
                        break;
                    case 'Trending':
                            iconName = require('./res/images/ic_trending.png')
                        break;
                    case 'Favorite':
                            iconName = require('./res/images/ic_favorite.png')
                        break;
                    case 'My':
                            iconName = require('./res/images/ic_my.png')
                        break;
                
                    default:
                        break;
                }
                return (
                    <Image
                        style = {{width: 26,height: 26, tintColor: focused ? '#2196F3' : 'gray'}}
                        source = {iconName}
                    />
                )
            }
         }),
         tabBarOptions: {
            activeTintColor: '#2196F3',
            inactiveTintColor: 'gray',
          },
    }
);
